<template>
  <Provider>
    <router-view v-slot="{ Component, route }" :key="routerViewKey">
      <transition mode="out-in" :appear="true" name="scale">
        <div>
          <component :is="Component" :key="route.fullPath" />
        </div>
      </transition>
    </router-view>
  </Provider>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Provider from './components/provider/theme.vue'

const route = useRoute()
const routerViewKey = computed(() => {
  return route.path + Math.random()
})
</script>
<style>
.ui-flex {
  display: flex;

  .flex-1 {
    flex: 1;
  }

  &.align-start {
    align-items: flex-start;
  }

  &.align-center {
    align-items: center;
  }

  &.align-end {
    align-items: flex-end;
  }

  &.justify-center {
    justify-content: center;
  }

  &.justify-between {
    justify-content: space-between;
  }

  &.justify-around {
    justify-content: space-around;
  }

  &.justify-start {
    justify-content: flex-start;
  }

  &.justify-end {
    justify-content: flex-end;
  }

  &.flex-wrap {
    flex-wrap: wrap;
  }
}

/* 整个页面的滚动条 */
::-webkit-scrollbar {
  width: 5px; /* 垂直滚动条宽度 */
  height: 5px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: #4DA7E8; /* 滑块颜色 */
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4DA7E8; /* 滑块悬停颜色 */
}

</style>
